<template>
  <div class="container">
    <h2>name: {{ name }} age: {{ age }}</h2>
    <button @click="updateName">修改数据</button>
  </div>
</template>
<script>
import { reactive } from 'vue'
export default {
  name: 'App',
  setup() {
    const obj = reactive({
      // !这些数据只有在对象里面才是响应式的，一旦脱离了这个环境，就变成普通的数据啦
      name: 'ifer',
      age: 10,
      address: '河南',
      sex: '男',
    })
    // 问题 1：模板中只用了两个属性，你确把整个对象都导出了（没必要，性能也不好）
    // 问题 2：模板中有重复的代码，例如 obj. ...

    const updateName = () => {
      obj.name = 'xxx'
    }
    // 错误的解决方式 1，导出的 name 就是一个普普通通的字符串，脱离了原来的响应式环境
    return { name: obj.name, age: obj.age, updateName }
  },
}

/* const o = { age: 18 }
// 把 o.age 完完全复制了一份，给了 age 变量，xx 里面的 age 脱离了原来的对象，和原来没关系了
const xx = { age: o.age }
xx.age = 19
console.log(o.age) */
</script>